import React, { useState } from 'react';
import { LaptopOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Menu, Button, Image, Input, message } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Header, Content, Sider } = Layout;

// 定义二级菜单项
const items2 = [
    {
        icon: <UserOutlined />,
        label: "启动会议",
        key: 'startMeeting',
    },
    {
        icon: <LaptopOutlined />,
        label: "历史会议",
        key: 'historyMeeting',
    },
];

// 用户账户页面的路径
const userAccountPath = '/Userinf';
const historyMeetingPath = '/historyMeeting'; // 历史会议页面的路径

function Joinmeeting() {
    const [inviteCode, setInviteCode] = useState(''); // 添加状态来控制输入框的值
    const navigate = useNavigate();

    const handleMenuClick = (e) => {
        if (e.key === 'startMeeting') {
            navigate('/svideo'); // 跳转到启动会议页面
        } else if (e.key === 'historyMeeting') {
            navigate(historyMeetingPath); // 跳转到历史会议页面
        }
    };

    const handleJoinMeeting = () => {
        if (!inviteCode.trim()) { // 检查输入框是否为空
            message.warning('请输入会议邀请码'); // 显示提示信息
        } else {
            // 在这里添加加入会议的逻辑
            console.log('加入会议，邀请码：', inviteCode);
        }
    };

    return (
        <Layout style={{ height: '100vh', margin: 0 }}>
            <Header
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    width: '100%',
                    height: '64px',
                    backgroundColor: 'white',
                    borderBottom: '1px solid #e8e8e8',
                }}
            >
                <Image src='/logo.png' preview={false} style={{ width:'70px' ,marginLeft: '-50px', marginTop: '-10px'}} />
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['2']}
                        items={[]}
                        style={{ flex: 1, minWidth: 0 }}
                    />

                    {/*用户跳转 */}
                    <Button
                        type="primary"
                        shape="circle"
                        icon={<UserOutlined style={{ fontSize: '20px' }} />}
                        size="large"
                        onClick={() => navigate(userAccountPath)}
                        style={{ backgroundColor: 'blue', border: '1px solid #ccc' }}
                    >
                    </Button>
                </div>
            </Header>
            
            {/* 侧边栏 */}
            <Layout>
                <Sider
                    width={200}
                    style={{ background: '#fff', borderRight: '1px solid #e8e8e8' }}
                >
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        items={items2}
                        onSelect={handleMenuClick} // 使用 onSelect 而不是 onClick
                        style={{ height: '100%', borderRight: 0 }}
                    />
                </Sider>

                {/*  主要内容*/}
                <Layout style={{ padding: 0 }}>
                    <Content
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 'calc(100vh - 64px)',
                            background: '#fff',
                            display: 'flex', // 使用Flexbox布局
                            flexDirection: 'column', // 垂直排列
                            alignItems: 'center', // 水平居中
                            justifyContent: 'center', // 垂直居中
                        }}
                    >
                        <Input
                            placeholder="请输入会议邀请码"
                            value={inviteCode} // 绑定输入框的值
                            onChange={(e) => setInviteCode(e.target.value)} // 更新输入框的值
                            style={{
                                width:'200px',
                                height:'50px',
                                marginBottom: '20px', // 添加底部间距
                            }} />
                        <Button
                            type="primary"
                            onClick={handleJoinMeeting} // 绑定点击事件
                        >
                            加入会议
                        </Button>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
}

export default Joinmeeting;